<template>
  <div>
    <table :v-model="TableData1" style="width: 100%">
      <el-card
        style="
          max-width: 100%;
          max-height: 1000px;
          margin-top: 8px;
          text-align: left;
        "
        shadow="always"
      >
        <el-button type="success" @click="ShowInfo">返回上一页</el-button>
        <el-button type="info" @click="dialogVisible = true">修改</el-button>
      </el-card>
      <el-card
        style="
          max-width: 100%;
          max-height: 1000px;
          margin-top: 8px;
          text-align: left;
        "
      >
        <el-row :gutter="24">
          <el-col :span="10" :offset="0">
            <span style="font-weight: bold; font-size: 20px">◆ 基础信息</span>
            <br />
            <br />
            <br />
            <p>收入单号：{{ TableData1.ReceiptNumber }}</p>
            <br />
            <br />
            <p>收入类型：{{ TableData1.IncomeTypeId }}</p>
            <br />
            <br />
            <p>销售订单：</p>
            <br />
            <br />
            <p>备注：{{ TableData1.Remark }}</p>
            <br />
            <br />
            <br />
            <span style="font-weight: bold; font-size: 20px">◆ 付款方信息</span>
            <br />
            <br />
            <br />
            <br />
            <p>付款方：{{ TableData1.Payer }}</p>
            <br />
            <br />
            <p>账户名称：{{ TableData1.AccountTitle }}</p>
            <br />
            <br />
            <p>网点名称：{{ TableData1.NetworkName }}</p>
            <br />
            <br />
            <span style="text-align: left">附件</span>
            <br />
            <br />
            <el-upload
              class="avatar-uploader"
              action="http://localhost:5055/api/Sale/GetImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="TableData1.IncomeStatementImage"
                :src="TableData1.IncomeStatementImage"
                class="avatar"
                prop="IncomeStatementImage"
                style="height: 100px; width: 100px"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-col>
          <el-col :span="10" :offset="0">
            <br />
            <br />
            <br />
            <p>收入主题：{{ TableData1.IncomeTheme }}</p>
            <br />
            <br />
            <p>收入日期：{{ TableData1.IncomeDate }}</p>
            <br />
            <br />
            <p>收入金额：{{ TableData1.IncomePrice }}</p>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <p>开户银行：{{ TableData1.DepositBank }}</p>
            <br />
            <br />
            <p>银行账号：{{ TableData1.BankAccount }}</p>
            <br />
            <br />
          </el-col>
        </el-row>
      </el-card>
    </table>
    <el-dialog v-model="dialogVisible" title="Tips" width="800">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        label-width="auto"
        class="demo-ruleForm"
        :size="TableData1"
        status-icon
      >
        <span style="text-align: left">基础信息</span>
        <br />
        <br />
        <el-row :gutter="24">
          <el-col :span="12" :offset="0">
            <el-form-item label="收入单号" prop="name">
              <el-input v-model="TableData1.ReceiptNumber" />
            </el-form-item>
            <el-form-item label="收入类型" prop="ReceiptNumber">
              <el-select
                v-model="TableData1.IncomeTypeId"
                placeholder="请选择"
                style="width: 240px"
              >
                <el-option
                  v-for="item in IncomeTypeList"
                  :key="item.IncomeTypeId"
                  :label="item.IncomeTypeName"
                  :value="item.IncomeTypeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="Remark">
              <el-input v-model="TableData1.Remark" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="收入主题" prop="IncomeTheme">
              <el-input v-model="TableData1.IncomeTheme" />
            </el-form-item>
            <el-form-item label="收入日期" prop="IncomeDate">
              <el-date-picker
                v-model="TableData1.IncomeDate"
                type="date"
                label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="收入金额" prop="IncomePrice">
              <el-input v-model="TableData1.IncomePrice" /> </el-form-item
          ></el-col>
        </el-row>
        <span style="text-align: left">付款方信息</span>
        <br />
        <br />
        <el-row :gutter="24">
          <el-col :span="12" :offset="0">
            <el-form-item label="付款方" prop="Payer">
              <el-input v-model="TableData1.Payer" />
            </el-form-item>
            <el-form-item label="账户名称" prop="AccountTitle">
              <el-input v-model="TableData1.AccountTitle" />
            </el-form-item>
            <el-form-item label="网点名称" prop="NetworkName">
              <el-input v-model="TableData1.NetworkName" /> </el-form-item
          ></el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="开户银行" prop="DepositBank">
              <el-input v-model="TableData1.DepositBank" />
            </el-form-item>
            <el-form-item label="银行账号" prop="BankAccount">
              <el-input v-model="TableData1.BankAccount" /> </el-form-item
          ></el-col>
        </el-row>
        <!-- <span style="text-align: left">销售订单</span>
      <br />
      <br />
      <el-row :gutter="24">
        <el-col :span="12" :offset="0">
          <el-form-item label="销售订单主题" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="出库状态" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="已收款金额" prop="name">
            <el-input v-model="ruleForm.name" /> </el-form-item
        ></el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="销售日期" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="优惠后金额" prop="name">
            <el-input v-model="ruleForm.name" /> </el-form-item
        ></el-col>
      </el-row> -->
        <span style="text-align: left">附件</span>
        <br />
        <br />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:5055/api/Sale/GetImage"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="TableData1.IncomeStatementImage"
            :src="TableData1.IncomeStatementImage"
            class="avatar"
            prop="IncomeStatementImage"
            style="width: 100xp; height: 100px"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="success" @click="UpdateInfo">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// import { ElTable } from "element-plus";
import { reactive } from "vue";
import axios from "axios";
// import { routes } from "vue-router/auto-routes";
import { useRouter, useRoute } from "vue-router";
import { UploadFilled } from "@element-plus/icons-vue";
// // import { ElMessage, FormInstance, FormRules, ElUpload } from "element-plus";
// import { Plus } from "@element-plus/icons-vue";
import { ElMessage, UploadProps } from "element-plus";
// import { ElMessageBox } from "element-plus";
import { ElMessageBox } from "element-plus";
import router from "@/router";
const IncomeTypeList = ref([]);
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
  TableData1.IncomeStatementImage = response;
};
const dialogVisible = ref(false);
const route = useRoute();
const TableData1 = reactive({
  incomeId: "",
  ReceiptNumber: "",
  Remark: "",
  IncomeTypeId: "",
  IncomeTheme: "",
  IncomeDate: "",
  IncomePrice: "",
  Payer: "",
  AccountTitle: "",
  NetworkName: "",
  DepositBank: "",
  BankAccount: "",
  IncomeStatementImage: "",
});
const ShowInfo = () => {
  router.push("/UserList/incomeshow");
};
const EditIncomeStatement = () => {
  axios
    .get(
      `InconeStatementDTO/EditIncomeStatement?incomeId=${route.query.incomeId}`
    )
    .then((res) => {
      TableData1.incomeId = res.data.incomeId;
      TableData1.ReceiptNumber = res.data.ReceiptNumber;
      TableData1.Remark = res.data.Remark;
      TableData1.IncomeTypeId = res.data.IncomeTypeId;
      TableData1.IncomeTheme = res.data.IncomeTheme;
      TableData1.IncomeDate = res.data.IncomeDate;
      TableData1.IncomePrice = res.data.IncomePrice;
      TableData1.Payer = res.data.Payer;
      TableData1.AccountTitle = res.data.AccountTitle;
      TableData1.NetworkName = res.data.NetworkName;
      TableData1.DepositBank = res.data.DepositBank;
      TableData1.BankAccount = res.data.BankAccount;
      TableData1.IncomeStatementImage = res.data.IncomeStatementImage;
    });
};
const GetIncomeTypeList = () => {
  axios.get("InconeStatementDTO/GetIncomeType").then((res) => {
    IncomeTypeList.value = res.data;
  });
};
const UpdateInfo = () => {
  axios
    .put("InconeStatementDTO/UpdateIncomeStatement", TableData1)
    .then((res) => {
      if (res.data > 0) {
        ElMessage.success("修改成功！");
        dialogVisible.value == false;
      }
    });
};
GetIncomeTypeList();
EditIncomeStatement();
</script>
